<template>
  <div class="container">
    <div class="wrap">
      <mpvue-echarts :echarts="echarts" :onInit="onInit" :canvasId="id"/>
    </div>
  </div>
</template>

<script>
  import * as echarts from 'echarts/dist/echarts.min'
  import mpvueEcharts from 'mpvue-echarts'

  let radarChart

  function initColumnChart (canvas, width, height) {
    radarChart = echarts.init(canvas, null, {
      width: width,
      height: height
    })
    canvas.setChart(radarChart)
    let option = {
      tooltip: {
        show: true
      },
      xAxis: [{
        type: 'category',
        data: ['0分', '20分', '40分', '60分', '80分', '100分', '120分']
      }],
      yAxis: [{
        type: 'value'
      }],
      series: [{
        'name': '人',
        'type': 'bar',
        'data': [2, 7, 10, 15, 12, 5, 10],
        itemStyle: {
          normal: {
            color: 'rgba(51, 170, 255, 1)'
          }
        }
      }]
    }
    radarChart.setOption(option)
    return radarChart
  }

  export default {
    props: {
      id: {
        type: String,
        default: 'radarChart'
      }
    },
    data () {
      return {
        echarts,
        onInit: initColumnChart
      }
    },
    components: {
      mpvueEcharts
    },
    onShareAppMessage () {
    }
  }
</script>

<style scoped>
  .wrap {
    width: 100%;
    height: 460rpx;
    position: relative;
    z-index: 1;
  }

  .wrap canvas {
    z-index: 1;
    position: relative;
  }
</style>
